<template>
    <div class="hot bg-white mt-3 pt-2 text-drak">
    <!-- 头标题 -->
      <div class="hot-title fs-xxxl pt-3">
          热门推荐<span class="fs-xxl text-pink pl-2">GOOD</span>
      </div>
      <!-- 轮播图 -->
      <div class="swiper-inner">

      <!-- swiper -->
      <swiper :options="swiperOption" class="swiper">
      	<swiper-slide v-for="(item,i) in swiperList" :key="i">

                <router-link :to="'/productDetail/'+item.id" tag="div">
                    <van-image class="w-100" :src="item.image" fit="contain" style="height: 11rem">
                    </van-image>
                
                    <div class="desc pt-2">
                        <div class="name text-c fs-xl">
                       {{item.name}}
                        </div>
                        <div class="price text-c fs-xl text-primary pt-2">
                            ￥{{item.price/100}}
                        </div>
                    </div>
                </router-link>
            </swiper-slide>
      	
      </swiper>

      </div>
      <div class="space"></div>
      
    </div>
</template>
<script>
	export default {
		data(){
			return {
				swiperOption: {
					effect: 'coverflow',
					grabCursor: true,
					centeredSlides: true,
					slidesPerView: 'auto',
					coverflowEffect: {
						rotate: 50,
						stretch: 0,
						depth: 100,
						modifier: 1,
						slideShadows : true,
					},
                },
                swiperList: []

		}
	},
  methods: {
    async getSwiperList(){
      const res = await this.$http.get(`search.do?page=${2}&size=${6}&category=疫情防护`)
      this.swiperList = res.data.rows

    }
  },
  created(){
    this.getSwiperList()
  }
}
</script>

<style lang="scss" scoped>
	.hot-title{
       font-weight: bold;
       text-align: center;
	}
	.swiper-inner {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
  }
  .swiper img {
  	width: 100%;
  }
</style>